<template>
    <div>
        <span v-if="!isEditRemark">{{ item.remark }} <i class="el-icon-edit"  @click="isEditRemark = !isEditRemark"></i></span>
        <span v-if="isEditRemark">
            <el-input
            type="textarea"
            :rows="2"
            :placeholder="$t('placeholder.input')"
            v-model="item.remark"
            style="width:200px"
            @blur="updateOrderRemark()">
            </el-input>
        </span>
    </div>
</template>
<script>
import { fetchUpdateRemark } from '@/api/order'
export default {
    props: {
        itemData: {
            type: Object,
            default () {
                return {}
            }
        }
    },
    data () {
        return {
            item: this.itemData,
            isEditRemark: ''
        }
    },
    methods: {
        updateOrderRemark() {
            if (this.item.remark) {
                let data = {
                    id: this.item.id,
                    remark: this.item.remark
                }
                fetchUpdateRemark(this.item.id, data).then(() => {
                    this.$notify({
                        title: 'Success',
                        message: 'Update Success',
                        type: 'success',
                        duration: 2000
                    })
                })
            }
        }
    }
}
</script>

        